<template>
	<view class="leave_box">
		<navTitle :titleRight="''" :title="'職位詳情'"></navTitle>
		<view class="msg-box">
			<view class="d-title">‌‌{{JobDetaileObj.job_name}}</view>
			<view class="d-price">{{JobDetaileObj.salary_text}}</view>
			<view class="d-icon">
				<view class="d-i-item">
					<img src="/static/images/job/icon_job_wz.png" mode="scaleToFill" alt="">
					<view>{{JobDetaileObj.enterpriseinfo.address}}</view>
				</view>
				<view class="d-i-item">
					<img style="width: 18px;height: 18px;" src="/static/images/job/icon_job_jy.png" mode="scaleToFill"
						alt="">
					<view>{{JobDetaileObj.work_experience.name}}</view>
				</view>
				<view class="d-i-item">
					<img style="width: 24px;height: 16px;" src="/static/images/job/icon_job_xl.png" mode="scaleToFill"
						alt="">
					<view>{{JobDetaileObj.education_level.name}}</view>
				</view>
			</view>
			<view class="d-zw">職位詳情</view>
			<view class="d-p">{{JobDetaileObj.job_info.responsibility}}</view>
			<view class="d-more" @tap="jump('/pages/job/companyDetails', {id:JobDetaileObj.enterpriseinfo.id })">
				<view>查看更多</view>
				<img src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" alt="">
			</view>
			<view class="d-gs" @tap="jump('/pages/job/companyDetails', {id:JobDetaileObj.enterpriseinfo.id})">
				<img :src="'http://www.hkeh.cc'+'/assets/img/qrcode.png'" mode="scaleToFill" alt="">
				<view>
					<view class="gs-name">{{JobDetaileObj.enterpriseinfo.full_name}}</view>
					<view class="gs-num">{{getCompanyScaleName(JobDetaileObj.enterpriseinfo.company_scale_id)}}
						{{JobDetaileObj.job_category.name_path}}
					</view>
				</view>
				<img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
			</view>
		</view>
		<view class="wrap-footer">
			<view class="btn-jj" @tap="handleTDJL('/pages/job/chatRoom')">投遞簡歷</view>
			<view class="btn-js"  @tap="communication('/pages/job/chatRoom',{job_name:JobDetaileObj.job_name,salary_text:JobDetaileObj.salary_text,full_name:JobDetaileObj.enterpriseinfo.full_name,company_scale_id:JobDetaileObj.enterpriseinfo.company_scale_id,responsibility:JobDetaileObj.job_info.responsibility})">立即溝通</view>
		</view>
	</view>
</template>

<script>
	import {
		recommendJobsdetail
	} from '../../utils/api';
	import navTitle from './../boss/components/nav-title.vue';
	export default {
		components: {
			navTitle
		},
		data() {
			return {
				showCalendar: false,
				reason: '',
				detaileId: '',
				intro: '',
				company_scale_id: '',
				stepsCurrent: -1,
				JobDetaileObj: {},
				steps: [{
						name: '直接主管：'
					},
					{
						name: '總經理：'
					}
				],
				vacationIndex: 0,
				vacationList: ['事假', '調休', '病假', '年假', '產假', '陪產假', '婚假', '例假', '喪假'],
				startDate: '',
				endDate: '',
			};
		},
		props: {
			couponList: {}
		},
		computed: {
			reasonLen() {
				return this.reason.length
			},
			timeDays() {

			}
		},
		onLoad(Option) {
			console.log(Option, 'oo')
			this.detaileId = Option.id
			this.intro = Option.intro
			this.company_scale_id = Option.company_scale_id
			this.recommendJobsdetail()
		},
		onShow() {},
		methods: {
			handleTDJL(path) {
				this.$router.push({
					path: path,
					// query: parmas
				});
			},
			communication(path,parmas)
			{
				this.$router.push({
					path: path,
					query: parmas
				});
			},
			jump(path, parmas) {
				this.$router.push({
					path: path,
					query: parmas
				});
			},
			getCompanyScaleName(scaleId) {
				const scaleNames = {
					1: "20人以下",
					2: "20-99人",
					3: "100-499人",
					4: "500-999人",
					5: "1000-9999人",
					6: "10000人以上",
				};
				return scaleNames[scaleId] || '未知规模'; // 如果没有找到对应的规模，返回 '未知规模'
			},
			async recommendJobsdetail() {
				let res = await recommendJobsdetail({
					job_id: this.detaileId
				})
				this.JobDetaileObj = res.data.job
				// console.log(res, 'kkk')
			}
		}
	};
</script>
<style lang="scss" scoped>
	.leave_box {
		width: 100%;
		height: 100vh;
		// overflow-y: scroll;
		background: #F4F6FA;
	}

	.msg-box {
		width: calc(100% - 40px);
		padding: 15px 10px;
		margin: 10px auto;
		background: #fff;
		border-radius: 10px;
		margin-bottom: 100rpx;
	}

	.d-title {
		height: 28px;
		font-family: LucidaGrande, LucidaGrande;
		font-weight: bold;
		font-size: 20px;
		color: #333333;
		line-height: 28px;
	}

	.d-price {
		height: 25px;
		font-weight: 600;
		font-size: 18px;
		color: #1C7AF7;
		line-height: 25px;
		margin: 10px 0 13px;
	}

	.d-icon {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.d-i-item {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 18px;
		font-size: 13px;
		color: #333333;
		line-height: 18px;
		 white-space: nowrap;  /* 防止换行 */
		  overflow: hidden;     /* 隐藏超出部分 */
		  text-overflow: ellipsis; /* 超出部分显示省略号 */
		

		img {
			width: 14px;
			height: 16px;
			margin-right: 8px;
		}
	}

	.d-i-item:first-child {
		flex: 1.5;
	}

	.d-zw {
		height: 22px;
		font-weight: 600;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		margin: 30px 0 7px;
	}

	.d-p {
		width: 100%;
		font-size: 14px;
		color: #666666;
		line-height: 26px;
	}

	.d-line {
		height: 1px;
		background: #DDDDDD;
		margin: 20px 0 9px;
	}

	.d-more {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 17px;
		font-size: 12px;
		color: #666666;
		line-height: 17px;
		margin-top: 40rpx;

		img {
			margin-left: 4px;
			width: 10px;
			height: 6px;
		}
	}

	.d-gs {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30px;

		img {
			width: 7px;
			height: 12px;
			margin: 0 0 0 10px;
		}

		img:first-child {
			width: 44px;
			height: 44px;
			margin: 0 10px 0 0;
		}

		&>view {
			width: calc(100% - 52px);
		}

		.gs-name {
			height: 21px;
			font-size: 15px;
			color: #333333;
			line-height: 21px;
		}

		.gs-num {
			white-space: nowrap;
			/* 禁止文本换行 */
			overflow: hidden;
			/* 隐藏超出的文本 */
			text-overflow: ellipsis;
			/* 用省略号代替超出的部分 */
			height: 18px;
			font-size: 13px;
			color: #666666;
			line-height: 18px;
			margin-top: 5px;
		}
	}

	.wrap-footer {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 44px;
		text-align: center;
		background: #fff;
	}

	.btn-jj {
		width: 110px;
		height: 44px;
		border-radius: 8px;
		font-weight: 500;
		font-size: 15px;
		color: #1C7AF7;
		margin-right: 10px;
		border: 1px solid #1C7AF7;
	}

	.btn-js {
		width: 215px;
		height: 44px;
		background: linear-gradient(90deg, #016CF1 0%, #0697F6 100%);
		border-radius: 8px;
		font-weight: 500;
		font-size: 15px;
		color: #FFFFFF;
	}
</style>